import { useEffect } from "react"
import * as echarts from 'echarts'

const mystyle = { height: "100%", width: "100%" }

function EchartsBarRight(props) {
    let option = {
        title: [
            {
                text: props.children
            }
        ],
        polar: {
            radius: [30, '80%']
        },
        angleAxis: {
            max: 4,
            startAngle: 75
        },
        radiusAxis: {
            type: 'category',
            data: props.dataY
        },
        tooltip: {},
        series: {
            type: 'bar',
            data: props.dataX,
            coordinateSystem: 'polar',
            label: {
                show: true,
                position: 'middle',
                formatter: '{b}: {c}'
            }
        }
    }
    //用于React组件中创建不是由事件引起的，而是由渲染本身引起的操作，类似calss中的（componentDidMount）
    useEffect(() => {
        const idEchartsBarRight1 = echarts.init(document.getElementById('idEchartsBarRight1'))
        idEchartsBarRight1.setOption(option)
    })


    return (
        <div style={{ height: "100%" }}>
            <div id="idEchartsBarRight1" style={mystyle}></div>
        </div>
    )
}

export default EchartsBarRight